<template>
  <!-- 发红包弹窗 -->
  <el-dialog
    v-model="redPacketDialogVisible"
    style="
      width: 375px;
      background: #222222;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      padding: 0;
    "
    class="red-packet-dialog"
    :modal="false"
  >
    <div class="red-packet-image">
      <img src="@/assets/live/RedPacket.png" />
    </div>
    <div class="packet-arange">
      <div class="amount">
        <img src="@/assets/living/border.png" class="border-back" />
        <span class="prefix-badge">金额</span>
        <el-input v-model="figure" style="width: 100px">
          <template #suffix>
            <img src="@/assets/dashboard/crystal.png" />
          </template>
        </el-input>
      </div>
      <div class="amount">
        <img src="@/assets/living/border.png" class="border-back" />
        <span class="prefix-badge">个数</span>
        <el-input v-model="num" style="width: 100px; border-radius: 4px" />
      </div>
    </div>
    <div style="padding: 0 30px">
      <el-input
        v-model="description"
        size="large"
        placeholder="请输入"
        type="textarea"
        style="font-size: 12px; border: none; outline: none; background-color: transparent"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <img src="@/assets/dashboard/crystal.png" class="icon" />
        <span class="data-text">{{ balance }}</span>
        <div class="red m-l-7" style="cursor: pointer" @click="toRecharge">+ 充值</div>
        <span style="flex: 1"></span>
        <span class="total-text">合计：{{ total }}</span>
        <img src="@/assets/dashboard/crystal.png" class="icon" />
        <div
          class="m-l-7"
          :class="{ red: !isBalanceEnough, gray: isBalanceEnough }"
          style="cursor: pointer"
        >
          {{ !isBalanceEnough ? "赠送" : "余额不足" }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: "RedPacket",
};
</script>
<script lang="ts" setup>
import { ref, computed } from "vue";

const redPacketDialogVisible = ref(false);
const figure = ref(""); // 金额
const num = ref(""); // 数量
const description = ref(""); //红包封面文案
// 余额
const total = computed(() => {
  return Number(figure.value) * Number(num.value);
});

const balance = ref(1200);

// 计算是否显示余额不足
const isBalanceEnough = computed(() => {
  return total.value > balance.value;
});

const emit = defineEmits(["toRecharge"]);
//充值
const toRecharge = () => {
  emit("toRecharge");
};
</script>

<style lang="scss" scoped>
.red-packet-dialog {
  .disabled-btn {
    position: relative;
    display: inline-block;
    // padding: 10px 15px;
    width: 60px;
    height: 24px;
    background: linear-gradient(360deg, #ababab 0%, #272625 100%);
    border: 2px solid #ffffff;
    border-radius: 237px;
    padding: 10px 10px;
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-weight: 500;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      pointer-events: none;
    }
  }
  .packet-arange {
    padding: 30px;
    display: flex;
    white-space: nowrap;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    gap: 13px;
    margin-bottom: 27px;
    padding: 0;
    .amount {
      display: flex;
      align-items: center;
      vertical-align: middle;
      color: #ffffff;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);
      .border-back {
        width: 151px;
        height: 32px;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
      }
    }

    .prefix-badge {
      height: 32px;
      width: 51px;
      background: linear-gradient(360deg, #ff4e50 0%, #fcb045 100%);
      border-radius: 4px 4px 4px 4px;
      padding: 4px 11px;
      z-index: 2;
    }
  }
  .red-packet-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 98px 134px 50px 134px;
  }
  .dialog-footer {
    display: flex;
    border-top: 1px solid rgba(216, 216, 216, 0.5);
    padding: 25px 20px;
    color: #ffffff;
    align-items: center;
    .data-text {
      font-size: 14px;
    }
    .total-text {
      font-size: 10px;
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 11px;
      pointer-events: none;
      z-index: 1;
      display: flex;
      white-space: nowrap;
    }
    .icon {
      width: 14px;
      height: 14px;
    }

    .red {
      font-size: 11px;
      color: #ffffff;
      padding: 7px 14px;
      background-image: url("@/assets/live/gradientButton.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .gray {
      font-size: 11px;
      color: #ffffff;
      padding: 7px 10px;
      background-image: url("@/assets/live/gray.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none !important;
  z-index: 1;
  color: #ffffff !important;
}

:deep(.el-input__inner) {
  color: #ffffff;
}
:deep(.el-textarea__inner) {
  background: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.6);
}
::v-deep textarea {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  height: 72px;
}
</style>
